/**
 * Created by yueylong on 2019/2/27.
 */
import React from 'react';
import { Menu } from 'antd';
import IconFont from 'MyIcon/iconFont';
import { Link } from 'react-router-dom';
import {createHashHistory} from 'history'
const history = createHashHistory()
import SysConstants from 'sys-constants';

const SubMenu = Menu.SubMenu

export default class Sider extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            openKeys: [],
            selectedKey: ""
        }
    }


    componentDidMount() {
        let openKeys = this._getPathName()
        this._setMenuOpen(openKeys)
    }

    _setMenuOpen = path => {
        this.setState({
            openKeys: new Array("/" + path.split("/")[1]) || [],
            selectedKey: path
        })
    }

    _getPathName = () => {
        const location = history.location
        let pathname = location.pathname;
        let index = pathname.indexOf("/system/warehousemanage");
        if(index > -1){
            pathname = "/system/warehousemanage"
        }
        return pathname
    }

    _handleClick = e => {
        this.setState({selectedKey: e.key})
    }

    _onOpenChange = openKeys => {
        const state = this.state
        const latestOpenKey = openKeys.find(key => !(state.openKeys.indexOf(key) > -1))
        const latestCloseKey = state.openKeys.find(key => !(openKeys.indexOf(key) > -1))

        let nextOpenKeys = []
        if (latestOpenKey) {
            nextOpenKeys = this._getAncestorKeys(latestOpenKey).concat(latestOpenKey)
        }
        if (latestCloseKey) {
            nextOpenKeys = this._getAncestorKeys(latestCloseKey)
        }

        this.setState({openKeys: nextOpenKeys})
    }

    _getAncestorKeys = key => {
        const map = {}
        return map[key] || []
    }

    render() {
        let sideMenu = SysConstants.siderMenu;
        // let roleType = CommonInfo.getRoleType();
        let roleType = 3;
        let menuItem = sideMenu[roleType - 1];
        let  collapsed = this.props.collapsed;
        return (
            <div className={collapsed ? 'sider-flod animate-slider-flod' : 'sider sider-show'}>
                <Menu
                    onClick={this._handleClick}
                    defaultSelectedKeys={["1"]}
                    defaultOpenKeys={["sub1"]}
                    mode="inline"
                    theme="dark"
                    openKeys={this.state.openKeys}
                    selectedKeys={[this.state.selectedKey]}
                    onOpenChange={this._onOpenChange}
                    inlineCollapsed={collapsed}
                    style={!collapsed ? {width:"190px"} : {width:"80px"}}
                >
                    {/*<Menu.Item key="/home" title="首页">*/}
                        {/*<Link to="/home">*/}
                            {/*<div className="sider-one">*/}
                                {/*<Icon type="play-circle" /><span  className={collapsed ? 'sider-name' : null}>首页</span>*/}
                            {/*</div>*/}
                        {/*</Link>*/}
                    {/*</Menu.Item>*/}
                    {/*<SubMenu*/}
                        {/*key="/order"*/}
                        {/*title={*/}
                            {/*<span className="sider-one">*/}
                                {/*<MyIcon type="order"/>*/}
                                {/*<span className={collapsed ? 'sider-name' : null}>订单管理</span>*/}
                            {/*</span>*/}
                        {/*}>*/}
                        {/*< Menu.Item key="/order/my">*/}
                            {/*<Link to="/order/my">*/}
                                {/*<div>*/}
                                    {/*<span className={collapsed ? 'sider-name' : null}>我的订单</span>*/}
                                {/*</div>*/}
                            {/*</Link>*/}
                        {/*</Menu.Item>*/}
                        {/*< Menu.Item key="/order/return" >*/}
                            {/*<Link to="/order/return">*/}
                                {/*<div>*/}
                                    {/*<span className={collapsed ? 'sider-name' : null}>退货款订单</span>*/}
                                {/*</div>*/}
                            {/*</Link>*/}
                        {/*</Menu.Item>*/}
                    {/*</SubMenu>*/}
                    {/*<Menu.Item key="/product" title="商品管理">*/}
                        {/*<Link to="/product">*/}
                            {/*<div className="sider-one">*/}
                                {/*<MyIcon type="shop"/><span className={collapsed ? 'sider-name' : null}>商品管理</span>*/}
                            {/*</div>*/}
                        {/*</Link>*/}
                    {/*</Menu.Item>*/}
                    {/*<SubMenu*/}
                        {/*key="/activity"*/}
                        {/*title={*/}
                            {/*<span className="sider-one">*/}
                                {/*<MyIcon.ActivityIcon/>*/}
                                {/*<span className={collapsed ? 'sider-name' : null}>营销活动</span>*/}
                            {/*</span>*/}
                        {/*}*/}
                    {/*>*/}
                        {/*< Menu.Item key="/activity/cash" >*/}
                            {/*<Link to="/activity/cash"><span className={collapsed ? 'sider-name' : null}>现  金  券</span></Link>*/}
                        {/*</Menu.Item>*/}
                        {/*< Menu.Item key="/activity/full_reduction">*/}
                            {/*<Link to="/activity/full_reduction"><span className={collapsed ? 'sider-name' : null}>折扣活动</span></Link>*/}
                        {/*</Menu.Item>*/}
                        {/*< Menu.Item key="/activity/discount">*/}
                            {/*<Link to="/activity/discount"><span className={collapsed ? 'sider-name' : null}>折扣活动</span></Link>*/}
                        {/*</Menu.Item>*/}
                        {/*< Menu.Item key="/activity/half_price">*/}
                            {/*<Link to="/activity/half_price" ><span className={collapsed ? 'sider-name' : null}>第二件半</span>价</Link>*/}
                        {/*</Menu.Item>*/}
                        {/*< Menu.Item key="/activity/one_buy">*/}
                            {/*<Link to="/activity/one_buy"><span className={collapsed ? 'sider-name' : null}>一元购活动</span></Link>*/}
                        {/*</Menu.Item>*/}
                    {/*</SubMenu>*/}
                    {/*<Menu.Item key="/merchant" title="商户中心">*/}
                        {/*<Link to="/merchant">*/}
                            {/*<div className="sider-one" >*/}
                                {/*<MyIcon type="huiyuan"/><span className={collapsed ? 'sider-name' : null}>商户中心</span>*/}
                            {/*</div>*/}
                        {/*</Link>*/}
                    {/*</Menu.Item>*/}
                    {this._meyMenuSider(menuItem,collapsed)}
                </Menu>
            </div>
        )
    }

    _meyMenuSider = (menuItem,collapsed) =>{
        if(menuItem.children == null){
            return;
        }
        let arr = menuItem.children;
        return arr.map((item,index)=>{
            return (
                <Menu.Item key={item.path} title={item.name}>
                    <Link to={item.path}>
                        <div className="sider-one">
                            <IconFont type={item.iconType} style={item.fontSize}/>
                            <span className={collapsed ? 'sider-name' : null}>{item.name}</span>
                        </div>
                    </Link>
                </Menu.Item>
            )
        })

    }
}





